/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import type { FC } from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import type { FlexStyle, ImageSourcePropType } from 'react-native';
import { useBreakpointValue, useHeightBreakpointValue } from '@hadss/react_native_adaptive_layout';

/** options props */
type OptionsProps = {
  /** 返回cb */
  onPress?: () => void;
};

type Option = {
  id: string;
  path: ImageSourcePropType;
  onPress?: () => void;
};

/**
 * @description 相机顶部操作选项
 * @returns 
 */
const Options: FC<OptionsProps> = (props) => {
  /** 基础options选项 */
  const baseOptions: Option[] = [
    {
      id: 'ic_camera_more',
      path: require('../../../../../assets/pic/ic_camera_more.svg'),
    },
    {
      id: 'ic_camera_play',
      path: require('../../../../../assets/pic/ic_camera_play.svg'),
    },
    {
      id: 'ic_camera_flash',
      path: require('../../../../../assets/pic/ic_camera_flash.svg'),
    },
    {
      id: 'ic_camera_masterai_y',
      path: require('../../../../../assets/pic/ic_camera_masterai_y.svg'),
    },
    {
      id: 'ic_camera_flash_hivision',
      path: require('../../../../../assets/pic/ic_camera_flash_hivision.svg'),
    },
  ];
  const isSmall = useHeightBreakpointValue<boolean>({
    base: false,
    sm: true,
    md: true,
    lg: false
  });
  /** 容器基础样式， */
  const baseStyle = useBreakpointValue<FlexStyle>({
    base: isSmall ? {
      flexDirection: 'row-reverse',
      justifyContent: 'space-between',
      paddingHorizontal: 16,
      position: 'absolute',
      top: 16,
      zIndex: 5,
      width: '100%'
    } : {
      flexDirection: 'row-reverse',
      marginBottom: 12,
      justifyContent: 'space-between',
      paddingHorizontal: 23,
    }
  });
  
  const list = useBreakpointValue<Option[]>({
    base: [
      { id: 'close', path: require('../../../../../assets/pic/ic_camera_masterai_close.svg'), onPress: props?.onPress },
      ...baseOptions
    ]
  });
  return (
    <View style={{ ...baseStyle }}>
      {
        list?.map(item => (
          <TouchableOpacity key={item.id} onPress={item?.onPress}>
            <Image
              style={{ width: 24, height: 24 }}
              source={item.path}
            />
          </TouchableOpacity>
        ))
      }
    </View>
  );
};

export default Options;